<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="css/main.css"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
</head>
<body>
	<header class="mui-bar mui-bar-nav">
	    <h1 class="mui-title">微信</h1>
	</header>
	<!--使用div显示隐藏
	<nav class="mui-bar mui-bar-tab"> 
	    <a class="mui-tab-item mui-active" href="#sub1">
	        <span class="mui-icon mui-icon-weixin"></span>
	        <span class="mui-tab-label">首页</span>
	    </a>
	    <a class="mui-tab-item" href="#sub2">
	        <span class="mui-icon mui-icon-contact"></span>
	        <span class="mui-tab-label">通信录</span>
	    </a>
	    <a class="mui-tab-item">
	        <span class="mui-icon mui-icon-paperplane"></span>
	        <span class="mui-tab-label">发现</span>
	    </a>
	    <a class="mui-tab-item">
	        <span class="mui-icon mui-icon-person"></span>
	        <span class="mui-tab-label">我的</span>
	    </a>
	</nav>
	
	<div class="mui-content">
	    <div class="mui-control-content" id="sub1">
	    	<ul class="mui-table-view">
	    	    <li class="mui-table-view-cell mui-media">
	    	        <a href="javascript:;">
	    	            <img class="mui-media-object mui-pull-left" src="img/didi.png">
	    	            <div class="mui-media-body">
	    	                幸福
	    	                <p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
	    	            </div>
	    	        </a>
	    	    </li>
	    	    <li class="mui-table-view-cell mui-media">
	    	        <a href="javascript:;">
	    	            <img class="mui-media-object mui-pull-left" src="img/icon_jingdong.png">
	    	            <div class="mui-media-body">
	    	                木屋
	    	                <p class="mui-ellipsis">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
	    	            </div>
	    	        </a>
	    	    </li>
	    	    <li class="mui-table-view-cell mui-media">
	    	        <a href="javascript:;">
	    	            <img class="mui-media-object mui-pull-left" src="img/taobao.png">
	    	            <div class="mui-media-body">
	    	                CBD
	    	                <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
	    	            </div>
	    	        </a>
	    	    </li>
	    	</ul>
	    </div>
	    <div class="mui-control-content" id="sub2">
	    	<ul class="mui-table-view">
	    	        <li class="mui-table-view-cell">
	    	            <a class="mui-navigate-right">
	    	                Item 1
	    	            </a>
	    	        </li>
	    	        <li class="mui-table-view-cell">
	    	            <a class="mui-navigate-right">
	    	                 Item 2
	    	            </a>
	    	        </li>
	    	        <li class="mui-table-view-cell">
	    	            <a class="mui-navigate-right">
	    	                 Item 3
	    	            </a>
	    	        </li>
	    	    </ul>
	    </div>
	</div>-->

	<nav class="mui-bar mui-bar-tab"> 
	    <a class="mui-tab-item mui-active" href="sub1.html">
	        <span class="mui-icon mui-icon-weixin"></span>
	        <span class="mui-tab-label">首页</span>
	    </a>
	    <a class="mui-tab-item" href="sub2.html">
	        <span class="mui-icon mui-icon-contact"></span>
	        <span class="mui-tab-label">通信录</span>
	    </a>
	    <a class="mui-tab-item" href="sub3.html">
	        <span class="mui-icon mui-icon-paperplane"></span>
	        <span class="mui-tab-label">发现</span>
	    </a>
	    <a class="mui-tab-item" href="sub4.html">
	        <span class="mui-icon mui-icon-person"></span>
	        <span class="mui-tab-label">我的</span>
	    </a>
	</nav>

</body>
</html>
	<script type="text/javascript">
	var subPages=['sub1.html','sub2.html','sub3.html','sub4.html'];
	//对象
	var subPagesStyle={
		top:'44px',
		bottom:'50px'
	}
	mui.plusReady(function(){
		var self = plus.webview.currentWebview();
		for(var i=0;i<subPages.length;i++){
			var sub=plus.webview.create(subPages[i],subPages[i],subPagesStyle);
			sub.hide();
			self.append(sub);
		}
		plus.webview.show(subPages[0]);
	})
	mui(".mui-bar-tab").on("tap","a",function(e){
		var tagPage=this.getAttribute("href");
		plus.webview.show(tagPage,"fade-in",100);
	})
	//退出应用
	var first=null;
	mui.back=function(){
		if(!first){
			first=new Date().getTime();
			mui.toast('再按一次退出微信');
			setTimeout(function(){
				first=null;
			},1000);
		}else{
			if(new Date().getTime()-first<1000){
				plus.runtime.quit();
				
			}
		}
	}
</script>